<template>
    <div class='box'>
        <div class="box1">
            <div class="box2">
                <span>公司logo</span>
                <span>欢迎来到后台管理系统</span>
                <span><el-button>退出</el-button></span>
            </div>
            <div class="box3">
                <div class="left">
     <el-row class="tac">
  <el-col :span="40">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>用户管理</span>
        </template>
        <el-menu-item-group>
            
          <el-menu-item index="1-1" @click="yes">  <i class="el-icon-menu"></i>用户列表</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="1">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
  </el-col>
  </el-row>
    </div>
    <div v-show="!show">
        欢迎来到用户页面
    </div>


   <div class="right" v-show="show">
       <el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/">用户管理</a></el-breadcrumb-item>
  <el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>
<div>
    <div>
        <input type="text" class="inp" v-model="val">
        <button @click="serch">搜索</button>
         <el-button type="primary" @click="add">添加用户</el-button>
    </div>
    <div>
        <table border="1" cellspacing="0" cellpadding="20">
            <thead>
                <tr>
                    <th>#</th>
                    <th>姓名</th>
                    <th>邮箱</th>
                    <th>电话</th>
                    <th>角色</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list" :key="index">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.email}}</td>
                    <td>{{item.phone}}</td>
                    <td>{{item.title}}</td>
                    <td>111</td>
                    <td>
                        <el-button type="primary" icon="el-icon-edit" circle></el-button>
                        <el-button type="danger" icon="el-icon-delete" @click="remove(index)" circle></el-button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
   </div>

</div>

        </div>
        <div class="box7" v-show="flag">
            <h3>添加用户</h3>
             用户名：<input type="text" v-model="val1">
             密码<input type="text">
             邮箱<input type="text" v-model="val2">
             电话<input type="text" v-model="val3">
             <div><button @click="no">取消</button></div>
             <div><button @click="adds">确定</button></div>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      //       name:"admin",
      // password:12345678,
      show:false,
      val:"",
      goods:[],
      list: [
        {
          id: 1,
          name: "admin",
          email: "adsfad@qq.com",
          phone: 12345678,
          title: "超级管理员"
        },
                {
          id: 2,
          name: "linken",
          email: "adsfad@qq.com",
          phone: 1213213123,
          title: "测试角色2"
        },
                {
          id: 3,
          name: "asdf1",
          email: "adsfad@qq.com",
          phone: 12123,
          title: "主管"
        },
                {
          id: 4,
          name: "asdf123",
          email: "adsfad@qq.com",
          phone: 111,
          title: "test"
        },
                {
          id: 5,
          name: "LCX4",
          email: "",
          phone: "",
          title: "超级管理员"
        },
      ],
      val1:"",
      val2:"",
      val3:"",
      flag:false

    };
  },
  mounted() {
    this.$message({
      message: "登录成功",
      type: "success"
    });
    this.getlist();
    this.goods = this.list
  },
  methods: {
    getlist() {
      this.$axios
        .get(
          `http://www.ysqorz.top:8888/api/private/v1?username=${
            this.name
          }&password=${this.password}`
        )
        .then(res => {
        //   console.log(res);
        });
    },
    // 搜索
    serch(){
            if(this.val ==""){
            this.list = this.goods
        }
        let arr = []
        this.list.forEach(item=>{
            // console.log(item);
            if(item.name.includes(this.val)){
               arr.push(item)
            }
        })
        // console.log(arr);
        this.list = arr

        // console.log(1);
    },
    // 删除
    remove(i){
        alert('确定要删除吗')
        this.list.splice(i,1)
    },
    // 添加
    add(){
        this.flag = true
    },
    // 添加成功
    adds(){
        let obj = {
            id:6,
            password:111,
            name:this.val1,
            email: this.val2,
            phone:this.val3
        }
        this.list.push(obj)
        
        this.flag = false
    },
    no(){
        this.flag = false
    },
    yes(){
        this.show = true
    }
  },
  components: {}
};
</script>

<style lang='scss' scoped>
.box {
  width: 100%;
  height: 1000px;
  position: relative;
  .box1 {
    width: 100%;
    height: 100%;
    .box2 {
      width: 100%;
      display: flex;
      justify-content: space-between;
      background-color: #373d41;
      text-align: center;
      height: 60px;
      align-items: center;
      box-sizing: border-box;
      padding: 0 20px;
      color: #fff;
    }
  }
}
.box3 {
  display: flex;
  //  .left{
  //      width: 60%;
  //  }
  //  .right{
  //      width: 40%;
  //  }
}
.inp {
  width: 150px;
  height: 35px;
}
.box7{
    position: absolute;
    width: 280px;
    height: 250px;
    background-color: #fff;
    text-align: center;
    border: 1px solid #ccc;
    top: 100px;
    left: 300px;
}
</style>
